﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chirper App</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/font-awesome.css" rel="stylesheet" />
    <link href="css.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">
        <div class="jumbotron">
            <div class="center">
                <h1>Chirper App</h1>
                <h2>console</h2>
                <input type="text" id="database" value="thesoundofonechirp" />
            </div>
            <!--<button class="btn btn-warning" onclick="SpacePort.clearAll();"><i class="fa fa-bomb"></i></button>-->
        </div>
        <!-- The Profiles Area -->
        <div class="col-md-3">
            
            <!--<select id ="nameStatus" name="select">
                <option value="out">Out of Office</option>
                <option value="work">At Work</option>
                <option value="available" selected>Available</option>
                <option value="unavailable">Unavailable</option>
            </select>-->
            <input type="text" id="messageArea" placeholder="Type your message" />
            <h1 id="name">Fothgil</h1>
            <img src="/Content/images/bbq-gremlin.jpg" class="pic-image"/>
            <h2>Learning to Program</h2>
            <p>The first step in doing anything in life is knowing what you want to do.</p>
            <p>The second step is finding out how to do it.</p>
            <h3>My Infinite-loop bucket list</h3>
            <ul>
                <li>Find what I love</li>
                <li>Do what I love</li>
                <li>Help other do the same</li>
            </ul>
            <div class="btn btn-info" onclick="hey.createChirp();">
                CHIRP
            </div>
            <div class="btn btn-default" onclick="hey.readChirps();">
                POSTS
            </div>
         
        </div>
        <!-- The Chirp Room -->
        <div id="chirpRoom" class="col-md-6 text-center">

        </div>
        <!-- Friends Area -->
        <div class="col-md-3 text-center">
            <input type="text" id="friendName" placeholder="Find-A-Friend" /><br />
            <!--<select>
                <option>Direct Friends</option>
                <option>Friends of Friends</option>
            </select>-->
            <input type="text" id="friendBase" placeholder="URL base" /><br />
            <div class="btn btn-info" onclick="hey.getDataBase(); hey.createFriend();">
                Add Friend
            </div>
            <div class="btn btn-success" onclick="hey.getDataBase(); hey.readFriends();">
                My Friends
            </div>
            <div id="friendsRoom">

            </div>


            

        </div>

    </div>
    
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="_scripts.js"></script>
</body>
</html>
